<!--vue模板-->
<template>
  <div>
    <el-dialog :model-value="visible" title="修改菜单" width="500" @close="cls">
      <el-form label-width="120px" :rules="rules" :model="menu" ref="formRef">
        <el-form-item label="菜单类型">
          <el-radio-group v-model="menu.category" @change="chg">
            <el-radio :value="1">一级菜单</el-radio>
            <el-radio :value="2">二级菜单</el-radio>
            <el-radio :value="3">三级菜单</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="menu.menuName" placeholder="请输入菜单名称"></el-input>
        </el-form-item>

        <el-form-item label="图标" v-show="menu.category == 1">
          <el-input v-model="menu.icon" placeholder="请输入图标"></el-input>
        </el-form-item>

        <el-form-item label="路径" v-show="menu.category != 3" prop="path">
          <el-input v-model="menu.path" placeholder="请输入访问路径"></el-input>
        </el-form-item>

        <el-form-item label="路由名称" v-show="menu.category == 2">
          <el-input v-model="menu.name" placeholder="请输入路由名称"></el-input>
        </el-form-item>

        <el-form-item label="组件路径" v-show="menu.category == 2">
          <el-input v-model="menu.component" placeholder="请输入组件路径如: @/views/..."></el-input>
        </el-form-item>

        <el-form-item label="权限标识" v-show="menu.category == 3">
          <el-input v-model="menu.auth" placeholder="请输入权限标识如: sys:user:save "></el-input>
        </el-form-item>

        <el-form-item label="是否显示" v-show="menu.category == 2">
          <el-radio-group v-model="menu.showLink">
            <el-radio :value="1">是</el-radio>
            <el-radio :value="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="上级菜单" v-show="menu.category != 1" prop="parentId">
          <el-tree-select v-model="menu.parentId" :data="data" check-strictly :render-after-expand="false"
            :props="defaultProps" style="width: 240px" />
        </el-form-item>

        <el-form-item label="排序" v-show="menu.category != 3">
          <el-input-number v-model="menu.sorts" :min="0"></el-input-number>
        </el-form-item>

        <el-form-item label="状态">
          <el-radio-group v-model="menu.showLink">
            <el-radio :value="1">启用</el-radio>
            <el-radio :value="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <el-button type="primary" @click="save">修改</el-button>
    </el-dialog>
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onMounted } from "vue";
import { queryTree, updateMenu } from "@/api/sys/menu.js";
import { ElMessage } from "element-plus";
//定义属性
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false
  }
});

//定义事件
const emit = defineEmits(["close", "refresh"]);

//表单引用
const formRef = ref();

//验证路径
const validatePath = (rule, value, callback) => {
  if (menu.value.category != 2) {
    callback();
    return; //三级菜单  停止执行
  }

  if (value === "") {
    callback(new Error("请输入访问路径！"));
  } else {
    callback();
  }
};

//验证上级菜单
const validateParentId = (rule, value, callback) => {
  if (menu.value.category == 1) {
    menu.value.parentId = 0;
    callback();
    return; //一级菜单  停止执行
  }

  if (value === "" || value == 0) {
    callback(new Error("请输选择上级菜单！"));
  } else {
    callback();
  }
};

//验证规则
const rules = ref({
  menuName: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
  path: [{ validator: validatePath, trigger: "blur" }],
  parentId: [{ validator: validateParentId, trigger: "change" }]
});

//上级菜单
const data = ref([]);
const defaultProps = {
  children: "children",
  label: "menuName",
  value: "id"
};

//菜单数据
const menu = ref({
  category: 1,
  menuName: "",
  icon: "",
  path: "",
  sorts: 1,
  name: "",
  component: "",
  auth: "",
  showLink: 1,
  parentId: 0
});

function chg(v) {
  if (v == 1) {
    menu.value.parentId = 0;
  } else {
    menu.value.parentId = "";
  }
}

//初始方法
function init(data) {
  menu.value = data;
}

//保存
async function save() {
  let valid = await formRef.value.validate(() => { });
  if (!valid) return;

  //--保存
  let res = await updateMenu(menu.value);
  if (res.code == 200) {
    ElMessage({
      message: "修改成功",
      type: "success"
    });
    //通知父组件刷新数据
    emit("refresh");
    cls();
  }
}
//关闭 方法
function cls() {
  //抛出关闭事件 通知父组件  我要关闭
  emit("close");
  //通知父组件刷新数据
  emit("refresh");
}

//初始化上级菜单树
async function initTree() {
  let res = await queryTree();
  if (res.code == 200) {
    data.value = res.data;
  }
}

onMounted(() => {
  initTree();
});

defineExpose({ init });
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped></style>